<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Digitalis - Business and Portfolio HTML Template</title>
    
    <!-- Meta-Tags -->
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    
    <!-- Stylesheets: Screen, Projection -->
    <link href="stylesheets/layout.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="stylesheets/default/black.css" media="screen, projection" rel="stylesheet" type="text/css" />
    
    <!--[if IE 6]>
      <script src="javascripts/ie.pngfix.js" type="text/javascript"></script>
      <script>DD_belatedPNG.fix('li, #logo a, #main, #preview, .post-data span, blockquote, .lightbox-image, .dropcap-circle, .breadcrumbs span.info');</script>
      <style>li, #footer .nav li a, #sidebar .nav li a {zoom:1}</style>
    <![endif]-->
    <!--[if lt IE 9]>
      <style>#showcase .rounded-corners-top, #showcase .rounded-corners-bottom {display: none}</style>
    <![endif]-->

    <!-- jQuery -->
    <script src="javascripts/jquery.js" type="text/javascript"></script>
    
    <!-- Cufon -->
    <script src="javascripts/cufon.js" type="text/javascript"></script>
    <script src="javascripts/cufon.fonts.js" type="text/javascript"></script>
    
    <!-- Nivo Slider -->
    <link href="plugins/nivoslider/nivo-slider.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="plugins/nivoslider/style-pack/custom-nivo-slider.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <script src="plugins/nivoslider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
    
    <!-- Fancybox -->
    <!--
    <link href="plugins/fancybox/jquery.fancybox-1.3.1.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <script src="plugins/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
    -->
    
    <!-- prettyPhoto -->
    <link href="plugins/prettyPhoto/css/prettyPhoto.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <script src="plugins/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>
        
    <!-- Superfish -->
    <script src="javascripts/jquery.superfish.js" type="text/javascript"></script>
    
    <!-- Forms -->
    <script src="javascripts/jquery.validate.pack.js" type="text/javascript"></script>
    <script src="javascripts/jquery.form.js" type="text/javascript"></script>
    
    <!-- Custom JavaScript -->
    <script src="javascripts/custom.js" type="text/javascript"></script>
  </head>
  
  <body class="">
    <div id="body-wrapper">
    
      <div id="header">
        <div class="wrapper">
          <div id="logo">
            <h1><a href="index.html">YOUR COMPANY NAME</a></h1>
          </div>
          
          <ul class="nav">
            <li class="first"><a href="index.html">Home</a>
              <ul>
                <li><a href="index.html">Home 1</a></li>
                <li><a href="index2.html">Home 2</a></li>
                <li><a href="index3.html">Home 3</a></li>
              </ul>
            </li>
            <li><a href="page.html">About</a></li>
            <li><a href="styles.html">Styles</a>
              <ul>
                <li><a href="styles.html">HTML Styles</a></li>
                <li><a href="styles2.html">Basic Content Styles</a></li>
                <li><a href="styles3.html">Advanced Content Styles</a></li>
                <li><a href="#">Multilevel Dropdown</a>
                  <ul>
                    <li><a href="#">Just for Demonstration</a></li>
                    <li><a href="#">Multilevel Dropdown</a></li>
                    <li><a href="#">Demonstration</a></li>
                    <li><a href="#">Dropdown Demo</a></li>
                  </ul>
                </li>
                <li><a href="columns.html">Columns</a></li>
                <li><a href="columns2.html">Fullwidth Columns</a></li>
                <li><a href="magazine.html">Magazine Look</a></li>
                <li><a href="forms.html">Forms</a></li>
              </ul>
            </li>
            <li><a href="blog.html">Blog</a>
              <ul>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="blog2.html">Blog - Fullwidth</a></li>
                <li><a href="blog3.html">Blog - Flash-Video</a></li>
                <li><a href="blog4.html">Blog - Slider</a></li>
              </ul>
            </li>
            <li><a href="post.html">Post</a></li>
            <li><a href="portfolio.html">Portfolio</a>
              <ul>
                <li><a href="portfolio.html">Portfolio - 3 Columns</a></li>
                <li><a href="portfolio3.html">Portfolio - 2 Columns</a></li>
                <li><a href="portfolio4.html">Portfolio - 1 Column</a></li>
                <li><a href="portfolio2.html">Portfolio - Additional Styles</a></li>
              </ul>
            </li>
            <li class="last"><a href="contact.html">Contact</a></li>
          </ul>
          <!-- END .nav --> 
        </div> 
        <!-- END .wrapper -->
      </div>
      <!-- END #header -->
      
      <div id="topbar">
        <strong class="wrapper">
          Put a cool and catchy slogan in here to make your newly purchased Template more interesting!
        </strong>
      </div>
  
      <div id="main">
        <div class="wrapper">
          <div id="content">
            
            <div class="entry">
              <h2>Basic Content Styles</h2>
              
              <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
              </p>
              
              
              
              <h3 class="underline">Dropcaps</h3>
              <div class="one-third">
                <h4>Normal</h4>
                <p>
                  <span class="dropcap">N</span>orbi mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.
                </p>
              </div>
              <div class="one-third">
                <h4>Square</h4>
                <p>
                  <span class="dropcap-square">S</span>orbi mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.
                </p>
              </div>
              <div class="one-third last">
                <h4>Circle</h4>
                <p>
                  <span class="dropcap-circle">C</span>orbi mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.
                </p>
              </div>
              
              
              
              <div class="divider"></div>
              
              
              
              
              <h3>Blockquotes</h3>
              <blockquote>
                <p>
                  Morbi interdum mollis sapien. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.
                </p>
                <p class="author">&mdash; <b>Ruven Pelka</b>, CEO of RP Web Design</p>
              </blockquote>
              <p>
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.
              </p>
              <blockquote class="float-left">
                <p>
                  Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.
                </p>
              </blockquote>
              <p>
                Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
              </p>
              <blockquote class="float-right">
                <p>
                  Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.
                </p>
              </blockquote>
              <p>
                Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
              </p>
              
              
              
              
              <h3 class="underline">Highlights</h3>
              <p>
                Lorem ipsum dolor sit amet, <span class="highlight">consectetuer adipiscing</span> elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, <span class="highlight-2">nascetur ridiculus</span> mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
              </p>
              
              
              
              
              <h3 class="underline">Columns</h3>
              <p class="one-half">
                <span class="dropcap-square">K</span>orbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus gravida vitae, ultricies ac.
              </p>
              <p class="one-half last">
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac.
              </p>
              
              <div class="hr"></div>
              
              <p class="one-third">
                <span class="dropcap-square">S</span>orbi interdum mollis sapien. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus gravida vitae, ultricies ac.
              </p>
              <p class="one-third">
                Interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus gravida vitae, ultricies ac.
              </p>
              <p class="one-third last">
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac.
              </p>
              
              
              
              <div class="divider"></div>
              
              
              
              
              <h3>Frames</h3>
              <div class="frame">
                <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
                  Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.
                </p>
                <div class="hr"></div>
                <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
                  Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.
                </p>
              </div>
              
              <div class="frame one-half float-right">
                <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
                </p>
              </div>
              <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
              </p>
              <div class="frame one-third float-left">
                <ul class="check">
                  <li>Lorem ipsum dolor</li>
                  <li>Aenean commodo</li>
                  <li>Adipiscing elit</li>
                  <li>Morbi interdum mollis</li>
                  <li>Lorem ipsum dolor</li>
                  <li>Aenean commodo</li>
                </ul>
              </div>
              <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
              </p>
              
              
              
              
              <h3>Content-Frame</h3>
              <div class="content-frame underline-headings wide-columns">
                <div class="one-third">
                  <h4>Web Design</h4>
                  <span class="dropcap-circle">1</span>
                  <p>
                    Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh.
                  </p>
                </div>
                <div class="one-third">
                  <h4>Print Layout</h4>
                  <span class="dropcap-circle">2</span>
                  <p>
                    Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh.
                  </p>
                </div>
                <div class="one-third last">
                  <h4>Programing</h4>
                  <span class="dropcap-circle">4</span>
                  <p>
                    Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh.
                  </p>
                </div>
              </div>
              
              
              
              
              
              <h3>Some notifications</h3>
              <p class="success">This is a success notification</p>
              <p class="notice">This is a notice</p>
              <p class="warning">This is a warning notification</p>
              <p class="error">And this is an error notification</p>
              
              
              
              
                    
            </div>
            <!-- END .entry -->
          </div>
          <!-- END #content -->
          
          
          
          
          
          
          <div id="sidebar">
            <div class="box">
              <h3>Recent Posts</h3>
              <div class="nav">
                <ul>
                  <li><a href="post.html">Nam convallis pellentesque nisl</a></li>
                  <li><a href="post.html">Cras iaculis ultricies nulla</a></li>
                  <li><a href="post.html">Praesent placerat</a></li>
                  <li><a href="post.html">Cras ornare tristique elit</a></li>
                  <li><a href="post.html">Nunc dignissim metus</a></li>
                  <li><a href="post.html">Aliquam tincidunt mauris eu</a></li>
                  <li><a href="post.html">Ut aliquam sollicitudin leo</a></li>
                  <li><a href="post.html">Nam convallis pellentesque nisl</a></li>
                  <li><a href="post.html">Cras iaculis ultricies nulla</a></li>
                </ul>
              </div>
            </div>
            <!-- END .box -->
            
            <div class="box">
              <h3>Some Text</h3>
              <div class="content">
                <h5>Unlimited Layout Variations</h5>
                <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
                <div class="hr"></div>
                <h5>Sleek Design</h5>
                <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
              </div>
            </div>
            <!-- END .box -->
            
            <div class="box">
              <h3>Layout Examples</h3>
              <div class="nav">
                <ul>
                  <li><a href="?example-style=black-box">Black Box</a></li>
                  <li><a href="?example-style=dark-grey">Dark Grey</a></li>
                  <li><a href="?example-style=super-simple">Super Simple</a></li>
                  <li><a href="?color=default_blue">Light Blue</a></li>
                  <li><a href="?sidebar-left=true">Sidebar Left</a></li>
                </ul>
              </div>
            </div>
            <!-- END .box -->
            
            <div class="box">
              <h3>Latest Work</h3>
              <div class="nav">
                <ul>
                  <li><a href="page.html">Fusce pellentesque suscipit nibh</a></li>
                  <li><a href="page.html">Integer vitae libero</a></li>
                  <li><a href="page.html">Risus egestas placerat</a></li>
                  <li><a href="page.html">Vivamus molestie gravida turpis</a></li>
                  <li><a href="page.html">Nulla nec ante</a></li>
                  <li><a href="page.html">Tincidunt mauris eu risus</a></li>
                  <li><a href="page.html">Consectetuer adipiscing elit</a></li>
                </ul>
              </div>
            </div>
            <!-- END .box -->
            
          </div>
          <!-- END #sidebar -->
          
          
          
          
          
        </div>
        <!-- END .wrapper -->
      </div>
      <!-- END #main -->
      
      <div id="bottombar">
        <div class="wrapper">
          <p class="primary">
            This is an HTML-Template by Ruven Pelka. You can purchase it at <a href="http://mojo-themes.com/">mojo-themes.com</a>.
          </p>
          <p class="breadcrumbs secondary">
            <span class="info">Here you are:</span>
            <a href="#">Start</a>
            <span> » </span>
            <a href="#">Blog</a>
            <span> » </span>
            <a href="#" class="active">Quisque volutpat mattis</a>
          </p>
        </div>
      </div>
      <!-- END #bottombar -->
      
      <div id="footer">
        <div class="wrapper">
          <div class="boxes">
            
            
            <div class="contact box">
              <h4>Get in touch with us</h4>
              <p class="vcard">
                <strong class="org">Digitalis Inc.</strong>
                <span class="adr">
                  <br/><span class="street-address">2 Infinite Loop, Suite 123 (Right Floor)</span>
                  <br/><span class="postal-code">Cupertino, CA 95014</span>
                </span>
                <br/><span class="tel">Tel: (408) 996-1011</span>
                <br/><span class="note">Fax: (408) 996-1012</span>
              </p>
              <p>
                <a href="contact.php" class="button">Contact Form »</a>
              </p>
            </div>
            <!-- END .box -->
            
            <div class="box nav">
              <h4>Latest News</h4>
              <ul>
                <li><a href="post.php">Dolor sit Amet</a></li>
                <li><a href="post.php">Quisque volutpat mattis</a></li>
                <li><a href="post.php">Nullam malesuada erat</a></li>
                <li><a href="post.php">Semper Suscipit</a></li>
                <li><a href="post.php">Consectetuer adipiscing elit</a></li>
              </ul>
            </div>
            <!-- END .box -->
            
            <div class="box nav">
              <h4>Latest Work</h4>
              <ul>
                <li><a href="page.php">Vestibulum Auctor</a></li>
                <li><a href="page.php">Nunc Dignissim</a></li>
                <li><a href="page.php">Risus Metus</a></li>
                <li><a href="page.php">Ornare Tristique</a></li>
                <li><a href="page.php">Crasono</a></li>
              </ul>
            </div>
            <!-- END .box -->
            
            <div class="box nav last">
              <h4>Blogroll</h4>
              <ul>
                <li><a href="#">WordPress Blog</a></li>
                <li><a href="#">WordPress Planet</a></li>
                <li><a href="#">Support Forum</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Suggest Ideas</a></li>
              </ul>
            </div>
            <!-- END .box -->
          </div>
          <!-- END .boxes -->
        </div>
        <!-- END .wrapper -->
      </div>
      <!-- END #footer -->
      
      <div id="footerbar">
        <div class="wrapper">
          <ul class="social-links primary">
            <li><a href="#"><img src="images/shared/social_icons/rss.png" alt="RSS" width="16" height="16" /></a></li>
            <li><a href="#"><img src="images/shared/social_icons/facebook.png" alt="Facebook" width="16" height="16" /></a></li>
            <li><a href="#"><img src="images/shared/social_icons/twitter.png" alt="Twitter" width="16" height="16" /></a></li>
            <li><a href="#"><img src="images/shared/social_icons/flickr.png" alt="Flickr" width="16" height="16" /></a></li>
            <li><a href="#"><img src="images/shared/social_icons/linkedin.png" alt="LinkedIn" width="16" height="16" /></a></li>
          </ul>
          <p class="copyright secondary">
            This is an HTML-Template by Ruven Pelka. You can purchase it at <a href="http://mojo-themes.com/">mojo-themes.com</a>.
          </p>
        </div>
        <!-- END .wrapper -->
      </div>
      <!-- END .footerbar -->
    </div>
    <!-- END #body-wrapper -->
    
  </body>
</html>